<template>
  <div>
    <a-modal
      :keyboard="false"
      :maskClosable="false"
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
    >
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="Cookie" v-bind="validateInfos.cookie">
          <a-textarea v-model:value="modelRef.cookie" :rows="4" placeholder="请选择" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, toRaw, toRefs } from "vue";
import { Form } from "ant-design-vue";
import { updateAccount } from "@/api/account-management";

const useForm = Form.useForm;
export default defineComponent({
  name: "UpdateAccountModal",
  props: {
    title: { type: String, default: "初始化账号" },
    record: { type: Object, require: true, default: () => {} },
    visible: { type: Boolean, require: true, default: false }
  },
  setup(props: any, ctx: any) {
    const { record } = toRefs(props);
    const confirmLoading = ref<boolean>(false);
    const modelRef = reactive({
      cookie: ""
    });
    const rulesRef = reactive({
      cookie: [
        {
          required: true,
          message: "请输入名称"
        }
      ]
    });
    const handleUpdateAccount = async (params:any) => {
      try {
        await updateAccount({
          accountId: record.value.id,
          cookie: params.cookie,
          userId: record.value.userId
        });
        confirmLoading.value = false;
        ctx.emit("handleCancelModal");
      } catch (e) {
        console.log(e);
      }
    };
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
    const handleOk = () => {
      validate()
        .then(() => {
          confirmLoading.value = true;
          handleUpdateAccount({...toRaw(modelRef)});
        })
        .catch((err) => {
          console.log("error", err);
        });
    };
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      confirmLoading,
      modelRef,
      validateInfos,
      resetFields,
      handleOk
    };
  }
});
</script>
